import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import toNative from '@/utils/toNative'
import { Component, Emit, Prop, Ref, Watch } from 'vue-facing-decorator'
import Drawer from '@/components/drawer/Index'
import { getInsureCompanyRuleDetail } from '@/api/insureCompanyRule'
import PreviewRuleDetail from './PreviewRuleDetail'
import type { InsureCompanyRuleDetailDto } from '@/api/insureCompanyRule/types'

@Component
export class DrawerPreview extends TableRender {
    @Prop() show!: boolean
    @Prop() id!: number
 
    showDrawer = false

    detailData = {} as InsureCompanyRuleDetailDto

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show', { immediate: true })
    async handleWatchShow() {
        this.showDrawer = this.show
        if (this.show) {
            this.initData(this.id)
        }
    }

    @Watch('showDrawer', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDrawer)
    }

    async initData(id: number) {
        const res = await getInsureCompanyRuleDetail({
            id
        })
        this.detailData = res
    }

    render() {
        return (
            <>
                <Drawer
                    v-model:show={this.showDrawer}
                    size={900}
                    title="保司规则预览"
                    destroyOnClose
                    resetStyle
                    showClose
                    hideCancel
                    v-slots={{
                        default: () => {
                            return (
                                <div>
                                    <PreviewRuleDetail detailData={this.detailData} />
                                </div>
                            )
                        },
                    }}
                ></Drawer>
            </>
        )
    }
}

export default toNative<{ id: number }, { refresh: () => void }>(DrawerPreview)
